<template>
    <List class="table_desc" :header="company.name"/>    
    <List name="company_basic">
        <template #header>
            <div class="title_desc">
                基本信息
            </div>
        </template>
    </List>
    <PageHeader>
    <!-- <template #title>
        <div col="24" style="height: 30px">基本信息</div>
    </template> -->
    
    <template #content>
        
        <DescriptionList :col="1">
            <Description term="跟进人：">{{ company.followup_employee }}</Description>
        </DescriptionList>
       <DescriptionList :col="2">
            <Description term="公司电话：">{{ company.phone_no }}</Description>
            <Description term="公司邮编：">{{ company.postal_code }}</Description>
       </DescriptionList>
       <DescriptionList :col="1">
            <Description term="公司地址：">{{ company.address }}</Description>
       </DescriptionList>
    </template>
</PageHeader>
<Tabs value="name1">
        <TabPane label="联系人" name="name1">
            <ContactList :companies_id = "companies_id" ></ContactList>
        </TabPane>
        <TabPane label="跟进记录" name="name2">
            <FollowupRecordList :companies_id = "companies_id" ></FollowupRecordList>
        </TabPane>
    </Tabs>

</template>

<script>
import { useRoute } from 'vue-router'
import axios from 'axios'
import ContactList from './ContactList.vue'
import FollowupRecordList from './FollowupRecordList'

export default {
    data() {
        return {
            companies_id: 0,
            company: {}
        };
    },
    methods: {
        fetch_company_info: function () {
            axios.get("http://localhost:3000/company/query_by_id?id=" + this.companies_id)
                .then(resp => {
                if (resp.data) {
                    this.company = resp.data;
                }
            });
        },
    },
    created() {
        const route = useRoute();
        this.companies_id = route.query.id;
        this.fetch_company_info();
    },
    mounted() {
    },
    components: { ContactList, FollowupRecordList }
}
</script>
<style>

.ivu-tabs-nav .ivu-tabs-tab-active{
    color: #1579F6;
    font-size: medium;
    font-weight: bold;
}
.ivu-tabs-nav .ivu-tabs-tab{
    font-size: medium;
    font-weight: bold;
}

.ivu-list[name='company_basic']{
    background-color: rgba(2, 125, 180, 0.0784313725490196);
    padding: 0px 32px 0 32px;
}
</style>